<template>
  <d2-container>

    <template slot="header">
      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button class="filter-item" icon="el-icon-circle-plus" type="primary" @click="handleAdd" :loading="mainTable.loading" size="mini" v-if="showAdd">添加提成</el-button>
            <el-tooltip :disabled="!!mainTable.current" content="请选择一行数据">
              <el-button class="filter-item" icon="el-icon-edit" type="default" @click="handleSet" :loading="mainTable.loading" size="mini">修改</el-button>
            </el-tooltip>
          </el-button-group>
        </div>
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading" size="small">重置</el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="fetchMainData" :loading="mainTable.loading" size="small">查询</el-button>
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud ref="d2Crud" :options="mainTable.options" :index-row="mainTable.indexRow" :columns="mainTable.columns" :data="mainTable.list" :selection-row="mainTable.allowSelect" :loading="mainTable.loading" @current-change="onMainCurrentChange" @row-dblclick="onMainDoubleClick" @selection-change=""></d2-crud>

    <template slot="footer">
      <el-pagination @size-change="handleMainSizeChange" @current-change="handleMainPageChange" :current-page="mainTable.pagination.currentPage" :page-sizes="mainTable.pagination.pageSizes" :page-size="mainTable.pagination.pageSize" :page-count="mainTable.pagination.pageCount" :total="mainTable.pagination.total" layout="total, sizes, prev, pager, next, jumper" :background="true">
      </el-pagination>
    </template>

    <dialog-add ref="dialog-add" @dialog-close="fetchMainData"></dialog-add>

  </d2-container>
</template>

<script>

import ApiMain from '@/api/formula';
import DialogAdd from './dialog-add';
import util from '@/libs/util.js';

export default {
  name: 'sales-salesFormula',
  mixins: [
  ],
  components: {
    'dialog-add': DialogAdd,
  },
  data() {
    return {

      mainQuery: {
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '计算公式', key: 'formula', align: 'center', showOverflowTooltip: true },
          { title: '级别', key: 'level', align: 'center', showOverflowTooltip: true },
          { title: '提成比例', key: 'rate', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, i) => {
            return (val / 100) + '%';
          }},
          { title: '创建时间', key: 'createTime', align: 'center', showOverflowTooltip: true },
        ],
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
      },

      showAdd: true,
    }
  },
  mounted() {
    this.resetMainData();
  },
  beforeDestroy() {
  },
  methods: {

    renderMainData(re) {
      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
      let levelArr = [];
      for (let i in this.mainTable.list) {
        levelArr.push(this.mainTable.list[i].level);
      }
      if (levelArr.sort().join(',') == '1,2') {
        this.showAdd = false;
      }
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.page = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = {
      };

      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiMain.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;

    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },

    handleAdd() {
      this.$refs['dialog-add'].show();
    },

    handleSet() {
      this.$refs['dialog-add'].show(this.mainTable.current );
    },

  }
}
</script>

<style>
</style>
